<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div>
        <h1>hello</h1>
    </div> -->
    <!-- <img src="1.jpg" width="300px"> -->
    <!-- <input type="password">
    <button>显示密码</button> -->
    <!-- <input type="text" value="0">
    <button id="minus">-</button>
    <button id="add">+</button> -->

    <!-- <h3>请选择你的老婆</h3>
    <div>
        <input type="checkbox" class="wife"> 章若楠
    </div>
    <div>
        <input type="checkbox" class="wife"> 古力娜扎
    </div>
    <div>
        <input type="checkbox" class="wife"> 迪丽热巴
    </div>
    <div>
        <input type="checkbox" class="all"> 全都要
    </div> -->
    <!-- <h3 style="font-size: 20px;">rose</h3> -->
    <style>
        .light {
            color: black;
            background-color: white;
        }

        .dark {
            color: white;
            background-color: black;
        }
        
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        div {
            height: 100%;
        }
    </style>
    <div class="light">
        咋说的是的是的SV参数的VS大V水电费VS的VS大V水电费从是当非SV当非地方
        咋说的是的是的SV参数的VS大V水电费VS的VS大V水电费从是当非SV当非地方
        咋说的是的是的SV参数的VS大V水电费VS的VS大V水电费从是当非SV当非地方
        咋说的是的是的SV参数的VS大V水电费VS的VS大V水电费从是当非SV当非地方
        咋说的是的是的SV参数的VS大V水电费VS的VS大V水电费从是当非SV当非地方
        咋说的是的是的SV参数的VS大V水电费VS的VS大V水电费从是当非SV当非地方
        咋说的是的是的SV参数的VS大V水电费VS的VS大V水电费从是当非SV当非地方
    </div>
    <script>
        let div = document.querySelector('div');
        div.onclick = function() {
            if (div.className == 'dark') {
                div.className = 'light';
            } else if (div.className == 'light') {
                div.className = 'dark';
            }else {
                alert('class 错误!');
            }
        }



        // let h3 = document.querySelector('h3');
        // h3.onclick = function() {
        //     let oldSize = h3.style.fontSize;
        //     oldSize = parseInt(oldSize);
        //     oldSize += 10;
        //     h3.style.fontSize = oldSize + 'px';
        // }


        // let all = document.querySelector('.all');
        // let wives = document.querySelectorAll('.wife');
        // all.onclick = function() {
        //     console.log('all.checked:' + all.checked);
        //     for(let i = 0; i < wives.length; i++){
        //         wives[i].checked = all.checked;
        //     }
        // }


        // let input = document.querySelector('input');
        // let addBtn = document.querySelector('#add');
        // let minusBtn = document.querySelector('#minus');
        // addBtn.onclick = function() {
        //     let oldValue = parseInt(input.value);
        //     oldValue += 1;
        //     input.value = oldValue;
        // }
        // minusBtn.onclick = function() {
        //     let oldValue = parseInt(input.value);
        //     oldValue -= 1;
        //     input.value = oldValue;
        // }

        // let input = document.querySelector('input');
        // let button = document.querySelector('button');
        // button.onclick = function() {
        //     if (input.type == 'password'){
        //         input.type = 'text';
        //         button.innerHTML = '隐藏密码';
        //     } else if (input.type == 'text') {
        //         input.type = 'password';
        //         button.innerHTML = '显示密码';
        //     } else {
        //         alert('type 错误!');
        //     }
        // }


        // let input = document.querySelector('input');
        // let button = document.querySelector('button');
        // button.onclick = function() {
        //     console.log(input.value);
        // }
        // let img = document.querySelector('img');
        // console.log(img.src);
        // console.log(img.width);
        // console.log(img.alt);
        // img.onclick = function() {
        //     img.src = '2.jpg';
        // }
        // let div = document.querySelector('div');
        // console.log(div.innerHTML);

        // div.onclick = function() {
        //     // div.innerHTML = 'hello Java';
        //     div.innerHTML = '<button>这是一个按钮</button>';
        // }
    </script>
</body>
</html>